<template>
    <div class="list">
        <Head title="分类"></Head>
        <van-tabs v-model="activeName" class="sub-child" color="#333" background="rgb(246,246,246)" swipeable>
            <van-tab  title="品牌" name="1">
                <listleft></listleft>
                
            </van-tab>
            <van-tab  title="分类" name="2">
                <listright></listright>
            </van-tab>
            
        

        <van-index-bar v-if="activeName=='1'?true:false"  :index-list="indexList" >
            <div v-for="(v, i) in indexList" :key="i">
                <van-index-anchor class="index_title" :index="v" />
                <van-cell class="brand_sort_box">
                    <div class="jx_brand" >
                        <div class="jx_img_box" v-for="(jx,jxi) in brandImg[v]" :key="jxi" @click="gotogoodslist(jx.status)">
                        <img :src="jx.img" alt="">  
                        </div>        
                    </div>
                </van-cell>
            </div>
        </van-index-bar>
        
</van-tabs>

        <Foot></Foot>
    </div>
</template>

<script>
import {brandImg} from '@/utils/tool.js';
export default {
      data() {
    return {
      activeName:"1",
      brandImg,
         indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "G",
        "H",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "S",
        "T",
        "Y",
        "其他",
      ],

     
    };
  },
  methods:{
        gotogoodslist(n){
            // console.log(n)
              this.$router.push({name:'goodslist',query:{status:n}})
        },
  },
}
</script>


<style lang="scss" >
.list{
    padding-bottom: 80px;
    .index_title{
        background-color: #fff;
        text-align: center;

    }
}
 .jx_brand{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 24px;
    .jx_img_box{
        width: 48%;
        margin-top: 24px;
        box-shadow: 0 0.05rem 0.05rem rgba(0,0,0,.1);
        img{
            width: 100%;
        }
    }

}
.brand_sort_box{
    background-image: linear-gradient(#f6ebef,#f8f6f9);
}
</style>
